
import styles from '@/pages/Login/login/index.module.css'
import React, { useState } from 'react';
import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import Verification from '@/components/Verification'
import Logo from '@images/logo.svg'
import { useNavigate } from 'react-router-dom'
const Login = () => {
    const [xCode, setxCode] = useState('');
    const [messageApi, contextHolder] = message.useMessage();
    const Navigate = useNavigate();
    const getChild = (msg) => {
        setxCode(msg)

    }
    const onFinish = (values) => {
        console.log('Received values of form: ', values);
        if (values.username === 'admin' && values.password === '123456') {
            Navigate('/home');
            sessionStorage.setItem('token', JSON.stringify(values))
        } else {
            SubmitError()
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }
    const SubmitError = () => {
        messageApi.open({
            type: 'error',
            content: '账号或密码错误！',
        });
    };
    return (

        <div className={styles.loginContent} >
            {contextHolder}
            <div className={[styles.papername, 'animate__animated animate__backInDown'].join(' ')} >
                <section className={styles.logo}>
                    <img src={Logo} alt="" />
                </section>
                <section className={styles.FormStyle}>
                    <Form
                        name="normal_login"
                        className="login-form"
                        size='large'
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            name="username"
                            hasFeedback
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的用户名!',
                                },
                                // ({ getFieldValue }) => ({
                                //     validator(_, value) {
                                //         let str = /^[a-zA-Z0-9]*$/;
                                //         if (str.test(value)) {
                                //             return Promise.resolve();
                                //         }
                                //         return Promise.reject(new Error('用户名不含任何字符和汉字，请重新输入!'));
                                //     },
                                // }),
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            dependencies={['password']}
                            hasFeedback
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的密码!',
                                },
                                // ({ getFieldValue }) => ({
                                //     validator(_, value) {
                                //         let str = /^[a-zA-Z0-9]{6,8}$/;
                                //         if (str.test(value)) {
                                //             return Promise.resolve();
                                //         }
                                //         return Promise.reject(new Error('密码为6到8为带大小写字母和数字组合!'));
                                //     },
                                // }),
                            ]}
                        >
                             <Input.Password autoComplete='off'prefix={<LockOutlined className="site-form-item-icon" />}  placeholder="密码" ></Input.Password>
                        </Form.Item>
                        <Form.Item
                            name="identifying"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的验证码!',
                                },
                                // ({ getFieldValue }) => ({
                                //     validator(_, value) {
                                //         let str = /^[a-zA-Z0-9]{4}$/;
                                //         if (str.test(value)) {
                                //             return Promise.resolve();
                                //         }
                                //         return Promise.reject(new Error('请输入正确的验证码!'));
                                //     },
                                // }),
                            ]}
                        >
                            <section style={{ display: "flex", alignItems: 'center', justifyContent: "center" }}>
                                <Input
                                    prefix={<SafetyOutlined className="site-form-item-icon" />} placeholder="验证码"
                                />
                                <Verification name='WDNM' getChildData={getChild} />
                            </section>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block size='large' className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        </div>
    )
}
export default Login;
